<template>
  <div id="stuCourseTeacher">
    <div>

      <div class="stuAdd">
        <el-button type="success" @click="stuFormDialog = true">增添教师</el-button>
      </div>
      <!-- 添加学生的dialog -->
      <el-dialog title="添加学生信息" :visible.sync="stuFormDialog" width="40%">
        <div class="formBox">
          <el-form :model="form">
            <input v-model="form.id" hidden />
            <el-form-item label="姓名" label-width="50px">
              <el-input v-model="form.name" placeholder="请输入姓名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="50px">
              <el-select style="width:100%;" v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业" label-width="50px">
              <el-select style="width:100%;" v-model="form.prof" placeholder="请选择专业">
                <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>
                <el-option label="智能科学与技术" value="智能科学与技术"></el-option>
                <el-option label="物联网工程" value="物联网工程"></el-option>
                <el-option label="自动化" value="自动化"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="stuFormDialog = false">取 消</el-button>
          <el-button type="primary" @click="addStu">确 定</el-button>
        </div>
      </el-dialog>
      
      <div class="stuSearch">
        <el-input placeholder="请输入内容" v-model="searchIn" class="input-with-select">
          <el-select v-model="sexIn" slot="prepend" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="全部" value=""></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getScoreInfo">搜索</el-button>
        </el-input>
      </div>

      <el-table :data="teaInfo.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
        :row-style="{ height: '30px' }" :cell-style="{ padding: '10px' }" stripe>
        <el-table-column prop="tno" align="center" sortable label="学工号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="tname" align="center" label="姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="tsex" align="center" label="性别">
        </el-table-column>
        <el-table-column prop="tprof" align="center" label="学院" width="200" show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column prop="object" label="科目">
                              </el-table-column> -->
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="editInfo(scope.row)" type="success" size="mini">编辑</el-button>
            <div style="display: inline;margin-left:5px;">
              <el-popconfirm title="确定删除该教师吗？" icon-color="red" @confirm="deleteInfo(scope.row)">
                <!-- <el-button @click="deleteInfo(scope.row)" type="danger" size="mini" slot="reference">删除</el-button> -->
                <el-button type="danger" size="mini" slot="reference">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top:15px;">
        <el-pagination background align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      teaInfo: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      searchIn: '',         //搜索输入
      sexIn: '',             //性别选择
      stuFormDialog: false,   //添加学生弹框
      form: {
        id: '',
        name: '',
        sex: '',
        prof: ''
      },
    }
  },
  methods: {
    getScore() {
      this.$http.get('/webapi/teacher/teacherList').then(res => {
        this.teaInfo = res.data;
        this.total = res.data.length;
      }).catch(e => { this.$message.error(e); })
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  mounted() {
    this.getScore();
  }
}
</script>

<style>
.stuSearch {
  float: right;
  width: 500px;
}

.el-select {
  width: 118px;
}
</style>